<template>
	<view>
		<view class="userbox">
			<!-- 头像信息 -->
			<view class="userhead">
				<image :src="userinfo.avatar" mode=""></image>
				<view class="names">
					<text>{{userinfo.nickname || '暂无'}}</text>
					<view class="">
						<image src="../static/icon_299@2x.png" mode=""></image><text>{{userinfo.application.phone || '暂无'}}</text>
					</view>
				</view>
			</view>
			<view class="whitebg">
				<view class="" @click="gototal">
					<text>{{fromData.total_finish_task || '0'}}</text>
					<text>总帮买单数</text>
				</view>
				<view class=""></view>
				<view class="" @click="gotoday">
					<text>{{fromData.day_finish_task || '0'}}</text>
					<text>今日帮买单数</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="kaohe" @click="gopj">
			<view class="">
				<image src="../static/icon_300@2x.png" mode=""></image>
				<text>评价晒单</text>
			</view>
			<image src="../static/icon_302@2x.png" mode=""></image>
		</view>
		<view class="kaohe" @click="goass">
			<view class="">
				<image src="../static/icon_301@2x.png" mode=""></image>
				<text>我的考核</text>
			</view>
			<image src="../static/icon_302@2x.png" mode=""></image>
		</view>


	<view class="center" v-if="userinfo">
		
		<image src="../static/icon_295@2x.png" mode="" @click.stop="changezt(3)" v-if="userinfo.staff_status==1"></image>
		<image src="../static/icon_303@2x.png" mode="" @click.stop="changezt(1)" v-else></image>
	</view>

		<!-- 底部tabbar -->
		<u-tabbar :value="value" :fixed="true" :placeholder="true" activeColor="#109C7A">
			<block v-for="(item,index) in tabbar" :key='index'>
				<u-tabbar-item :text="item.name" @click="switchtab(item.url)">
					<image class="u-page__item__slot-icon" slot="active-icon" :src="item.checked_icon">
					</image>
					<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.no_checked_icon">
					</image>
				</u-tabbar-item>
			</block>
		</u-tabbar>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				a:'',
				token: '',
				userinfo: {}, //信息
				fromData: {

				}, //获取信息
				value: 1,
				tabbar: [{
						name: '订单中心',
						checked_icon: '../static/cpm_tab-icon_1@3x.png',
						no_checked_icon: '../static/cpm_tab-icon_3@3x.png',
						url: '/P_buyer/order_center/index'
					},
					{
						name: '个人中心',
						checked_icon: '../static/cpm_tab-icon_2@3x.png',
						no_checked_icon: '../static/cpm_tab-icon_4@3x.png',
						url: '/P_buyer/mine/index'
					}
				]
			}
		},
		watch: {

		},
		onLoad() {
			// uni.navigateTo({
			// 	url:"./totallist"
			// })
		},
		mounted() {
			// this.$refs.popup.open();
			// this.$refs.popup2.open();
			// this.$refs.popup3.open();
		},
		onShow() {
			this.getData();
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token')
				this.getuserinfo()
			}
		},

		methods: {
			// 切换状态
			changezt(e){
				let that=this
				uni.showModal({
					title: '提示',
					content: '是否切换状态',
					success: function (res) {
						if (res.confirm) {
					          that.$request("buyer/set_status",{status:e},'GET').then(res=>{
								   that.getuserinfo()
							  })
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getuserinfo() {
				this.$request('user', {}, 'GET').then(res => {
					console.log(res, '信息');
					this.userinfo = res.data
				})
			},
			//获取帮买书
			getData() {
				this.$request('buyer/task/statistics', {}, 'GET').then(res => {
					console.log(res, 'res');
					if (res.status == 200) {
						this.fromData = res.data;
					}
				})
			},
			switchtab(e) {
				uni.redirectTo({
					url: e
				})
			},
			gototal() {
				uni.navigateTo({
					url: "./totallist"
				})
			},
			gotoday() {
				uni.navigateTo({
					url: "./todaylist"
				})
			},
			gopj() {
				uni.navigateTo({
					url: "./evaluate_list"
				})
			},
			goass() {
				uni.navigateTo({
					url: "./myass"
				})
			},
		}
	}
</script>


<style lang="scss">
	.kaohe {

		height: 160rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		margin-left: 30rpx;
	}

	.kaohe>view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.kaohe>view image {
		width: 39rpx;
		height: 42rpx;
		margin-right: 10rpx;
	}

	.kaohe>image {
		width: 14rpx;
		height: 28rpx;
	}

	.whitebg {
		position: absolute;
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 50rpx 0px rgba(146, 178, 162, 0.35);
		border-radius: 20rpx;
		bottom: -150rpx;
		left: 30rpx;
		display: flex;
		align-items: center;
	}

	.whitebg>view:nth-of-type(odd) {
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;

	}

	.whitebg>view:nth-of-type(odd) text:nth-of-type(1) {
		font-size: 50rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.whitebg>view:nth-of-type(even) {
		width: 1rpx;
		height: 160rpx;
		background: #CCCCCC;
		border-radius: 50%;
	}

	.userhead {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.userhead>image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		background: #FFFFFF;
		margin-right: 30rpx;
	}

	.names>text {
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 6rpx;
	}

	.names>view image {
		width: 16rpx;
		height: 20rpx;
		margin-right: 6rpx;
	}

	.names>view {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.userbox {
		height: 352rpx;
		width: 750rpx;
		background: #00A552;
		position: relative;
		box-sizing: border-box;
		padding-top: 30rpx;


	}

	.center {
		position: fixed;
		right: 0rpx;
		bottom: 180rpx;
		width: 150rpx;
		height: 144rpx;
		z-index: 6;

	}

	.center image {
		width: 100%;
		height: 100%;
	}
</style>
